<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="/js/jquery.min.js"></script>
    <script src="/js/vue3.2.37.global.js"></script>
    <script src="/js/axios.min.js"></script>
    <script src="/js/layer.js"></script>
    <style>
        .testRequest {
            display: block;
            margin-bottom: 15px;
        }
    </style>
</head>
<body>

<div id="app" style="text-align: center">
    <h3>当前网址：http://127.0.0.1:8080</h3>

    <h1 style="text-align: center">登录页面（当前不支持本系统的用户名、密码登录，仅支持Oauth四种授权方式登录）</h1>

    <p v-if="error" style="color: red;text-align: center">
        第三方授权登录失败：<span style="font-weight: bolder">{{error}}</span>，如想继续请重新尝试点击授权按钮
    </p>

    <!--<p>内容：<span>{{content}}</span></p>-->

    <div>
        <button style="margin-bottom: 50px"><a :href="firstOauthUrl">第三方网站Oauth-授权码【code】登录（http://localhost:9090）
            <p>{{firstOauthUrl}}</p></a></button>
    </div>

    <div>
        <button style="margin-bottom: 50px"><a :href="secondOauthUrl">第三方网站Oauth-隐式【implicit】登录（http://localhost:9090）
            <p>{{secondOauthUrl}}</p></a></button>
    </div>

    <div style="background: #E5E5E5;padding: 10px;border: 1px solid black;margin-bottom: 50px;">
        <span>第三方网站Oauth-授权系统的账号密码【password】登录</span>
        <form action="/user-oauth/login" method="post">
            <input name="type" value="0" style="display: none">
            <p>
                <!-- <span>账号：</span><input type="text" name="oauthUsername" v-model="oauthUsername"></input> -->
                <span>账号：</span><input type="text" name="oauthUsername"></input>
            </p>
            <p>
                <!-- <span>密码：</span><input type="password" name="oauthPassword" v-model="oauthPassword"></input> -->
                <span>密码：</span><input type="password" name="oauthPassword"></input>
            </p>
            <p>
                <!-- <button @click="oauthLogin(0)">登录</button> -->
                <button type="submit">登录</button>
            </p>
        </form>
    </div>


    <div style="background: #E5E5E5;padding: 10px;border: 1px solid black;margin-bottom: 50px;">
        <span>第三方网站Oauth-客户端令牌【client_credentials】登录 <span style="color: red">【正常来说这种方式不会出现跟用户交互仅仅只是纯后台接口请求而已，因为可视化查看所以做成这样】</span></span>
        <form action="/user-oauth/login" method="post">
            <input name="type" value="1" style="display: none">
            <p>
                <button type="submit">获取授权服务器所有用户信息</button>
            </p>
        </form>
    </div>




</div>

</body>

<script>

    /**
     * 获取url链接中某个参数的参数值
     * @param key 参数名
     */
    function getRequestParam(key) {
        var url = location.search;
        var theRequest = new Object();
        if (url.indexOf("?") != -1) {
            var str = url.substr(1);
            strs = str.split("&");
            for (var i = 0; i < strs.length; i++) {
                theRequest[strs[i].split("=")[0]] = decodeURIComponent(strs[i].split("=")[1]);
            }
        }
        var value = theRequest[key];
        return value;
    }

</script>

<script>
    const {createApp} = Vue
    const request = axios.create({})
    createApp({
        data() {
            return {
                firstOauthUrl: "",
                secondOauthUrl: "",
                content: "测试",
                error: getRequestParam("error"),
                oauthPassword: "",
                oauthUsername: "",
                credentials: "",
            }
        },
        methods: {
            oauthLogin: async function (type) {
                if (type == 0) {

                } else {

                }
            }
        },
        mounted: async function () {
            let {data: responseData} = await request.get('/user-oauth/oauth-url')
            if (responseData && responseData.firstOauthUrl) {
                this.firstOauthUrl = responseData.firstOauthUrl;
                this.secondOauthUrl = responseData.secondOauthUrl;
            }

            if (this.error && this.error.length > 0) {
                layer.alert(this.error)
            }

        }
    }).mount('#app')

</script>

</html>